<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <style>
    @font-face {
      font-family: "genshin";
      src: url('../fonts/9w6ve-4l668.ttf')
    }
    body {
      width: 100%;
      margin: 0;
      background-color: transparent;
      padding: 0;
      font-family: "genshin";
    }
    .bg-img {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: url('http://unsplash.it/1200x800') center center no-repeat;
      background-size: cover;
    }
    .footer{
      margin: 10px 0 3px 0;
    }
    .bg-img:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
      opacity: .6;
    }

    .box {
      margin: 20px 10px 10px;
      padding: 10px;
      /*background-color: rgba(255, 255, 255, 0.45);*/
      box-shadow: 0px 8px 32px rgba(31,38,135,0.47);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.18);
      transition: all .3s ease-in-out;
      /*background:  linear-gradient(135deg,#7117ea,#ea6060);*/

      /*-webkit-background-clip: text;*/
      /*color: transparent;*/
      /*background-clip: text;*/
    }
    .box:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(31,38,135,.4);
    }
    .title, .footer{
      transition: all .3s ease-in-out;
    }
    .footer span{
      margin: 10px;
      background: linear-gradient(135deg,#622774,#c53364);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding: 5px;
      border-radius: 5px;
      /*border:1px solid rgba(255,255,255,0.18);*/
    }
    .title span{
      /*box-shadow: 0px 8px 32px rgba(31,38,135,0.39);*/
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      /*background-color: rgba(154, 136, 140, 0.15);*/
      padding: 5px;
      border-radius: 5px;
      /*border:1px solid rgba(255,255,255,0.18);*/
      /*background: linear-gradient(135deg,#622774,#c53364);*/
      /*-webkit-background-clip: text;*/
      /*background-clip: text;*/
      /*color: transparent;*/
    }
    .title span{
      margin: 0 0 10px;
      padding-top: 0px;
      display: inline-block;
      /*white-space: nowrap;*/
      font-size: 23px;
      min-width: 100px;
    }
    .footer span{
      font-size: 15px;
    }
    .footer:hover{
      transform: translateY(-5px);
    }
    .title:hover{
      transform: translateY(-5px);
    }
    .tb { display: flex; justify-content: center; align-items: center; }

    table {
      width: 100%;
      border-collapse: collapse;
      /*font-size: 18px; !* 设置表格字体大小 *!*/
      /*line-height: 0.5; !* 将行高设置为字体大小的一半 *!*/
    }

    th, td {padding: 5px; }
    td img{
      height: 150px;
    }

    td {
      position: relative;
    }
    .text-container {
      position: absolute;
      top: 50%;
      left: 25%;
      transform: translateY(-50%);
    }
    .text-container span {
      font-size: 20px;
    }
  </style>
</head>
<body class="bg-img">
<div  class="box">
  <div class="title" style="text-align: center;">
    <span style="font-weight: bold">{{@title}}</span>
  </div>
<div class="tb">
  <table>
    <caption>{{@caption}}</caption>
    <thead>
    <tr>
      <th></th>
    </tr>
    </thead>
    <tbody>
    {{each columns[0]  item index}}
    <tr>
      {{each columns  column}}
      <td>{{column[index]}}</td>
      {{/each}}
    </tr>
    {{/each}}
    </tbody>
  </table>
<!--  <table>-->
<!--    <thead>-->
<!--    <tr>-->
<!--      <th>编号</th>-->
<!--      <th>姓名</th>-->
<!--      <th>年龄</th>-->
<!--      <th>性别</th>-->
<!--      <th>地址</th>-->
<!--      <th>电话</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--    <tbody>-->
<!--    <tr>-->
<!--      <td>001</td>-->
<!--      <td>张三</td>-->
<!--      <td>25</td>-->
<!--      <td>男</td>-->
<!--      <td>北京市海淀区中关村大街1号</td>-->
<!--      <td>010-12345678</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--      <td>002</td>-->
<!--      <td>李四</td>-->
<!--      <td>30</td>-->
<!--      <td>男</td>-->
<!--      <td>上海市浦东新上海市浦东新区世纪大道100号上海市浦东新区世纪大道100号上海市浦东新区世纪大道100号区世纪大道100号</td>-->
<!--      <td>021-87654321</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--      <td>003</td>-->
<!--      <td>王五</td>-->
<!--      <td>28</td>-->
<!--      <td>女</td>-->
<!--      <td>广州市天河区珠江新城华夏路1号</td>-->
<!--      <td>020-55555555</td>-->
<!--    </tr>-->
<!--    &lt;!&ndash; 更多数据行 &ndash;&gt;-->
<!--    </tbody>-->
<!--     可选的tfoot-->
<!--     可选的caption-->
<!--  </table>-->
</div>
  <p style="text-align:center;font-weight: bold">{{@footer}}</p>
</div>
<div class="footer" style="text-align: center;">
  <span>Created By Yunzai-Bot {{@yunZaiVersion}} & Avocado-Plugin {{@pluginVersion}}</span>
</div>
</body>